<template>
	<div>
		<el-dialog title="添加话题" :visible="addShow" :before-close="close" width="60%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="ruleForm.title" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="label_name">
					<el-select v-model="ruleForm.label_name" placeholder="请选择标签" style="width: 200px">
						<el-option v-for="item in options" :key="item.id" :label="item.label_name" :value="item.label_name"> </el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="排序" required prop="sort">
					<el-input-number
						v-model="ruleForm.sort"
						controls-position="right"
						@change="handleChange"
						:min="0"
						:max="10"
						style="width: 200px"
					></el-input-number>
					<div class="tim">数字越大越在前</div>
				</el-form-item>
				<el-form-item label="允许评论" prop="is_answer">
					<el-switch v-model="ruleForm.is_answer"></el-switch>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="ruleForm.state">
						<el-radio :label="false">待审核</el-radio>
						<el-radio :label="true">已发布</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="内容" prop="content">
					<div ref="txt"></div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: center">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="btnok">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import E from 'wangeditor';
import { PttowntalkList } from '@/api/towntalk';
import { formatDate } from '@/utils/formatTime';
import store from '@/store';
import { Getlabel } from '@/api/towntalk';
export default {
	name: 'aaa',
	data() {
		return {
			ruleForm: {
				title: '', //标题
				label_name: '', //标签
				is_answer: true, //允许评论,
				state: false, //状态
				content: '', //内容
				sort: 0, //排序
			},
			rules: {
				title: [
					{ required: true, message: '请输入标题', trigger: 'blur' },
					
				],
				label_name: [{ required: true, message: '请填写标签', trigger: 'blur' }],

				content: [{ required: true, message: '请填写内容', trigger: '' }],
			},
			options: [],
		};
	},
	props: {
		addShow: {
			type: Boolean,
			required: true,
		},
	},
	created() {
		this.label_nameGet();
	},

	methods: {
		close() {
			this.$emit('update:addShow', false);
		},

		async label_nameGet() {
			const data = await Getlabel();
			this.options = data;
		},
		handleChange() {},
		async btnok() {
			try {
				this.ruleForm.content = this.$refs.txt.innerText;
				await PttowntalkList({ ...this.ruleForm, createtime: formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS'), ...store.state.userInfos.userInfos });
				this.$message.success('添加成功');
				this.$emit('rush');
				this.$emit('update:addShow', false);
			} catch (err) {
				console.log(err);
			}
		},
	},
	mounted() {
		this.$nextTick(() => {
			let editor = new E(this.$refs.txt);
			editor.config.focus = false;
			editor.config.onblur = () => {
				this.ruleForm.content = editor.txt.text();
				this.$refs.ruleForm.validateField('content');
			};
			editor.create();
		});
	},
};
</script>

<style scoped>
.tim {
	color: #909399;
}
</style>
